<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:insert="~{include :: header('用户个人信息')}" />
</head>
<body class="hold-transition">
<div class="container-fluid mt-2 mb-2">
    <section class="section-content">
        <div class="row">
            <div class="col-sm-3 pr5">
                <div class="ibox float-e-margins">
                    <div class="ibox-title ibox-title-gray dashboard-header gray-bg">
                        <h5>个人资料</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="text-center">
                            <p><img class="img-circle img-lg" th:src="(${manager.avatar} == '') ? @{/static/img/profile.jpg} : @{${manager.avatar}}"></p>
                            <p><a href="javascript:avatar()">修改头像</a></p>
                        </div>
                        <ul class="list-group list-group-striped">
                            <li class="list-group-item"><i class="fa fa-user"></i>
                                <b class="font-noraml">登录名称：</b>
                                <p class="pull-right">[[${manager.loginName}]]</p>
                            </li>
                            <li class="list-group-item"><i class="fa fa-phone"></i>
                                <b class="font-noraml">手机号码：</b>
                                <p class="pull-right">[[${manager.mobile}]]</p>
                            </li>
                            <li class="list-group-item"><i class="fa fa-calendar"></i>
                                <b class="font-noraml">创建时间：</b>
                                <p class="pull-right">[[${manager.createTime}]]</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="col-sm-9 about">
                <div class="ibox float-e-margins">
                    <div class="ibox-title ibox-title-gray dashboard-header">
                        <h5>基本资料</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="nav-tabs-custom">
                            <ul class="nav nav-tabs">
                                <li class="active"><a href="#manager_info" data-toggle="tab" aria-expanded="true">基本资料</a></li>
                                <!--<li><a href="#modify_loginPwd" data-toggle="tab" aria-expanded="false">修改密码</a></li>-->
                            </ul>
                            <div class="tab-content">
                                <!--用户信息-->
                                <div class="tab-pane active" id="manager_info" th:object="${manager}">
                                    <form class="form-horizontal" id="form-user-edit">
                                        <!--隐藏ID-->
                                        <input name="id" id="id" type="hidden">
                                        <div class="form-group row">
                                            <label class="col-sm-2 col-form-label text-sm-right">用户名称</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" name="managerName" th:field="*{managerName}" placeholder="请输入用户名称">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-sm-2 col-form-label text-sm-right">手机号码</label>
                                            <div class="col-sm-10">
                                                <input type="text"  class="form-control" maxlength="11" th:field="*{mobile}" placeholder="请输入手机号码" disabled>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-sm-2 col-form-label text-sm-right">性别</label>
                                            <div class="col-sm-10">
                                                <div class="radio-box">
                                                    <input type="radio" id="radio1" th:field="*{sex}" name="sex" value="1">
                                                    <label for="radio1">男</label>
                                                </div>
                                                <div class="radio-box">
                                                    <input type="radio" id="radio2" th:field="*{sex}" name="sex" value="2">
                                                    <label for="radio2">女</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-sm-2"></label>
                                            <div class="col-sm-10">
                                                <button type="button" class="btn btn-primary" onclick="submitUserInfo()"><i class="fa fa-check"></i>保 存</button>&nbsp;
                                                <button type="button" class="btn btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>

                                <!--修改密码-->
                                <div class="tab-pane" id="modify_loginPwd">
                                    <form class="form-horizontal" id="form-user-resetPwd">
                                        <div class="form-group row">
                                            <label class="col-sm-2 col-form-label text-sm-right">旧密码</label>
                                            <div class="col-sm-10">
                                                <input type="password" class="form-control" name="oldPassword" placeholder="请输入旧密码">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-sm-2 col-form-label text-sm-right">新密码</label>
                                            <div class="col-sm-10">
                                                <input type="password" class="form-control" name="newPassword" id="newPassword" placeholder="请输入新密码">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-sm-2 col-form-label text-sm-right">确认密码</label>
                                            <div class="col-sm-10">
                                                <input type="password" class="form-control" name="confirmPassword" placeholder="请确认密码">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-sm-2"></label>
                                            <div class="col-sm-10">
                                                <button type="button" class="btn btn-primary" onclick="submitChangPassword()"><i class="fa fa-check"></i>保 存</button>&nbsp;
                                                <button type="button" class="btn btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<th:block th:insert="~{include :: footer}" />
<script>
    /*用户管理-头像*/
    function avatar() {
        $.modal.open("修改头像", '/my/avatar.html');
    }

    /*用户信息-修改*/
    $("#form-user-edit").validate({
        onkeyup: false,
        rules:{
            managerName:{
                required:true,
            }
        },
        messages: {
            "managerName": {
                required: "请输入用户名称",
            }
        },
        focusCleanup: true
    });

    function submitUserInfo() {
        if ($.validate.form()) {
            $.operate.saveModal("/my/profile/update.json", $('#form-user-edit').serialize());
        }
    }

    /*用户管理-修改密码*/
    $("#form-user-resetPwd").validate({
        onkeyup: false,
        rules:{
            oldPassword:{
                required:true,
                remote: {
                    url: "/my/pwd/check.json",
                    type: "get",
                    dataType: "json",
                    data: {
                        loginPwd: function() {
                            return $("input[name='oldPassword']").val();
                        }
                    }
                }
            },
            newPassword: {
                required: true,
                minlength: 6,
                maxlength: 20
            },
            confirmPassword: {
                required: true,
                equalTo: "#newPassword"
            }
        },
        messages: {
            oldPassword: {
                required: "请输入原密码",
                remote: "原密码错误"
            },
            newPassword: {
                required: "请输入新密码",
                minlength: "密码不能小于6个字符",
                maxlength: "密码不能大于20个字符"
            },
            confirmPassword: {
                required: "请再次输入新密码",
                equalTo: "两次密码输入不一致"
            }

        },
        focusCleanup: true
    });

    function submitChangPassword () {
        if ($.validate.form("form-user-resetPwd")) {
            $.operate.saveModal("/my/pwd/reset.json", $('#form-user-resetPwd').serialize());
        }
    }
</script>
</body>
</html>
